<template>
  <el-dialog class="print-tpl" :visible.sync="isShow" :before-close="handleCancelModal" :show-close="false" :close-on-click-modal="false" width="750px">
    <!-- 数据表单 -->
    <el-form ref="formParams" :model="formParams" label-width="120px" size="small">
      <el-tabs v-model="active" type="card">
        <el-tab-pane label="基础信息" name="1">
          <div style="display: flex">
            <div class="info-left" style="width: 500px">
              <el-form-item class="is-required" prop="title" label="模板标题：">
                <el-input v-model="formParams.title" placeholder="请输入模板标题" />
              </el-form-item>
              <el-form-item class="is-required" prop="mode" label="模板分类：">
                <el-select v-model="formParams.mode" placeholder="请选择分类" clearable>
                  <el-option :key="0" label="商品标签" value="goods_label" />
                  <el-option :key="1" label="商品单据" value="goods_list" />
                  <el-option :key="2" label="投标场次单据" value="bid_goods" />
                  <el-option :key="3" label="标品出价单据" value="bid_goods_price" />
                </el-select>
              </el-form-item>
              <el-form-item prop="tpl_desc" label="注释说明：">
                <el-input v-model="formParams.tpl_desc" type="textarea" show-word-limit placeholder="请输入打印单的注释说明" rows="5" />
              </el-form-item>
              <div style="display: flex">
                <div style="display: flex">
                  <div>
                    <el-form-item prop="width" label="纸张宽高：">
                      <el-input v-model="formParams.width" placeholder="宽 mm" style="width: 75px" />
                    </el-form-item>
                  </div>
                  <div class="not-label" style="margin-left: 2px;text-align: right">
                    <el-form-item prop="height">
                      <el-input v-model="formParams.height" placeholder="高 mm" style="width: 75px" />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
            <div class="info-right" style="margin-left: 20px">
              <el-upload
                ref="upload_cover"
                v-loading="imageUpload"
                class="avatar-uploader"
                action="/"
                name="files"
                :limit="1"
                :http-request="handleUpload"
                :show-file-list="false"
                :data="{ field: 'upload_cover' }"
              >
                <el-image v-if="coverPath" :src="coverPath" fit="cover" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="列表内容" name="2">
          <template>
            <div style="display: flex;justify-content:space-between">
              <el-input v-model="fileItem.title" size="mini" placeholder="头部标题" style="margin-right: 2px" />
              <el-input v-model="fileItem.field" size="mini" placeholder="字段标识" style="margin-right: 2px" />
              <el-input v-model="fileItem.width" size="mini" placeholder="宽度(mm)" style="margin-right: 2px" />
              <el-input v-model="fileItem.size" size="mini" placeholder="字体(px)" style="margin-right: 2px" />
              <el-input v-model="fileItem.break" size="mini" placeholder="换行" style="margin-right: 2px" />
              <el-button v-if="itemIndex > -1" type="primary" size="mini" @click="handleEditConfirm">确定</el-button>
              <el-button v-else type="primary" size="mini" @click="handleAddFieldItem">添加</el-button>
            </div>
            <el-table :data="formParams.lists.item_list" stripe border height="263" style="margin: 3px 0">
              <el-table-column prop="title" label="头部标题" />
              <el-table-column prop="field" label="字段标识" width="130" />
              <el-table-column prop="width" label="宽度(mm)" width="90" />
              <el-table-column prop="size" label="字体(px)" width="80" />
              <el-table-column prop="break" label="换行" width="50" />
              <el-table-column prop="action" label="操作" width="200">
                <template slot-scope="item">
                  <div class="button-group">
                    <el-button v-if="item.$index > 0" type="text" size="mini" @click="handleSortFieldItem(item.$index, 1)">上移</el-button>
                    <el-button v-if="item.$index < formParams.lists.item_list.length - 1" type="text" size="mini" @click="handleSortFieldItem(item.$index, 2)">下移</el-button>
                    <el-button type="text" size="mini" @click="handleEditFieldItem(item.$index)">编辑</el-button>
                    <el-button type="text" size="mini" @click="handleDelFieldItem(item.$index)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="display: flex;justify-content:space-between">
              <div>
                <el-form-item class="not-label" prop="lists.granularity">
                  <el-input v-model="formParams.lists.granularity" size="mini" placeholder="粒度数值" style="width: 268px">
                    <template slot="prepend">表格行高粒度：</template>
                    <template slot="append">px</template>
                  </el-input>
                </el-form-item>
              </div>
              <div style="display: flex">
                <el-form-item class="not-label" prop="lists.mainTop" style="margin-right: 10px">
                  <el-input v-model="formParams.lists.mainTop" size="mini" placeholder="0mm" style="width: 150px">
                    <template slot="prepend">顶：</template>
                  </el-input>
                </el-form-item>
                <el-form-item class="not-label" prop="lists.mainLeft">
                  <el-input v-model="formParams.lists.mainLeft" size="mini" placeholder="0mm" style="width: 150px">
                    <template slot="prepend">左：</template>
                  </el-input>
                </el-form-item>
              </div>
              <el-form-item v-if="false" class="not-label" prop="lists.fixed_title">
                <el-radio-group v-model="formParams.lists.fixed_title" size="mini">
                  <el-radio-button :label="0"><span style="padding: 0 5px">标题首页显示</span></el-radio-button>
                  <el-radio-button :label="1"><span style="padding: 0 5px">标题每页显示</span></el-radio-button>
                </el-radio-group>
              </el-form-item>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="页头内容" name="3">
          <div style="font-weight: bold;margin-bottom: 4px">页头HTML代码：</div>
          <template v-if="active === '3'">
            <el-form-item class="not-label" style="margin-bottom: 4px" prop="thead">
              <code-mirror field="thead" :value="formParams.thead" :height="307" @input="handleCodemirror" />
            </el-form-item>
          </template>
          <div style="display: flex;">
            <el-form-item class="not-label" prop="lists.theadTop" style="margin-right: 10px">
              <el-input v-model="formParams.lists.theadTop" size="mini" placeholder="默认px" style="width: 150px">
                <template slot="prepend">顶：</template>
              </el-input>
            </el-form-item>
            <el-form-item class="not-label" prop="lists.theadLeft" style="margin-right: 10px">
              <el-input v-model="formParams.lists.theadLeft" size="mini" placeholder="默认px" style="width: 150px">
                <template slot="prepend">左：</template>
              </el-input>
            </el-form-item>
            <el-form-item class="not-label" prop="lists.theadWidth" style="margin-right: 10px">
              <el-input v-model="formParams.lists.theadWidth" size="mini" placeholder="默认px" style="width: 150px">
                <template slot="prepend">宽：</template>
              </el-input>
            </el-form-item>
            <el-form-item class="not-label" prop="lists.theadHeight">
              <el-input v-model="formParams.lists.theadHeight" size="mini" placeholder="默认px" style="width: 150px">
                <template slot="prepend">高：</template>
              </el-input>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="页尾内容" name="4">
          <template v-if="active === '4'">
            <div style="font-weight: bold;margin-bottom: 4px">页尾HTML代码：</div>
            <el-form-item class="not-label" style="margin-bottom: 4px" prop="tfoot">
              <code-mirror field="tfoot" :value="formParams.tfoot" :height="307" @input="handleCodemirror" />
            </el-form-item>
            <div style="display: flex;">
              <el-form-item class="not-label" prop="lists.tfootTop" style="margin-right: 10px">
                <el-input v-model="formParams.lists.tfootTop" size="mini" placeholder="默认px" style="width: 150px">
                  <template slot="prepend">顶：</template>
                </el-input>
              </el-form-item>
              <el-form-item class="not-label" prop="lists.tfootLeft" style="margin-right: 10px">
                <el-input v-model="formParams.lists.tfootLeft" size="mini" placeholder="默认px" style="width: 150px">
                  <template slot="prepend">左：</template>
                </el-input>
              </el-form-item>
              <el-form-item class="not-label" prop="lists.tfootWidth" style="margin-right: 10px">
                <el-input v-model="formParams.lists.tfootWidth" size="mini" placeholder="默认px" style="width: 150px">
                  <template slot="prepend">宽：</template>
                </el-input>
              </el-form-item>
              <el-form-item class="not-label" prop="lists.tfootHeight">
                <el-input v-model="formParams.lists.tfootHeight" size="mini" placeholder="默认px" style="width: 150px">
                  <template slot="prepend">高：</template>
                </el-input>
              </el-form-item>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="页眉页脚" name="5">
          <template v-if="active === '5'">
            <el-form-item class="not-label" prop="header" label="页眉HTML：">
              <code-mirror field="header" :value="formParams.header" :height="154" @input="handleCodemirror" />
            </el-form-item>
            <el-form-item class="not-label" prop="footer" label="页脚HTML：">
              <code-mirror field="footer" :value="formParams.footer" :height="153" @input="handleCodemirror" />
            </el-form-item>
          </template>
        </el-tab-pane>
        <el-tab-pane label="条码设置" name="6">
          <template v-if="active === '6'">
            <div class="info-left" style="margin: 30px 0 29px 0; width: 400px">
              <el-form-item prop="bar_code_mode" label="条码类型：">
                <el-select v-model="formParams.lists.bar_code_mode" placeholder="请选择条码类型">
                  <el-option v-for="(codeType, index) in codeTypeList" :key="index" :label="codeType" :value="codeType" />
                </el-select>
              </el-form-item>
              <el-form-item prop="bar_code_field" label="编码字段：">
                <el-input v-model="formParams.lists.bar_code_field" placeholder="请填写数据字段名称" />
              </el-form-item>
              <el-form-item prop="fixed_left" label="固定左侧：">
                <el-select v-model="formParams.lists.fixed_left" placeholder="请选择是否固定条码左侧距离">
                  <el-option :key="0" label="不固定" :value="0" />
                  <el-option :key="1" label="固定" :value="1" />
                </el-select>
              </el-form-item>
              <el-form-item prop="bar_code_width" label="条码宽度：">
                <el-input v-model="formParams.lists.bar_code_width" placeholder="单位（px/mm）" />
              </el-form-item>
              <el-form-item prop="bar_code_height" label="条码高度：">
                <el-input v-model="formParams.lists.bar_code_height" placeholder="单位（px/mm）" />
              </el-form-item>
              <el-form-item prop="bar_code_top" label="顶部距离：">
                <el-input v-model="formParams.lists.bar_code_top" placeholder="单位（mm）" />
              </el-form-item>
              <el-form-item prop="bar_code_left" label="左侧距离：">
                <el-input v-model="formParams.lists.bar_code_left" placeholder="单位（px/mm）" />
              </el-form-item>
              <el-form-item prop="rotate" label="旋转角度：">
                <el-input v-model="formParams.lists.rotate" placeholder="单位（deg）" />
              </el-form-item>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <!-- 提交按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :disabled="isSubmit" @click="handleCancelModal">取 消</el-button>
      <el-button type="primary" size="small" :loading="isSubmit" @click="handleSubmitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { save } from '@/api/print-tpl'
import CodeMirror from '@/components/CodeMirror'
import { extract } from '@/utils/tools'
import upload from '@/api/upload'

export default {
  components: { CodeMirror },
  props: {
    'isShow': { type: Boolean, default: true },
    'itemData': { type: Object, default: null }
  },
  data: function() {
    return {
      isSubmit: false,
      imageUpload: false,
      active: '1',
      fileItem: {
        title: '',
        field: '',
        width: '',
        size: ''
      },
      itemIndex: -1,
      codeTypeList: [
        'QRCode', 'Code93', '128A', '128B', '128C', '128Auto', 'EAN8', 'EAN13', 'EAN128A',
        'EAN128B', 'EAN128C', 'Code39', '39Extended', '2_5interleaved', '2_5industrial',
        '2_5matrix', 'UPC_A', 'UPC_E0', 'UPC_E1', 'UPCsupp2', 'UPCsupp5',
        '93Extended', 'MSI', 'PostNet', 'Codabar', 'PDF417'
      ],
      coverPath: null,
      formParams: {
        tpl_id: null,
        title: null,
        mode: null,
        width: null,
        height: null,
        cover: null,
        header: null,
        footer: null,
        thead: null,
        tfoot: null,
        lists: {
          item_list: [],
          fixed_title: 0,
          granularity: null,
          mainTop: null,
          mainLeft: null,
          bar_code_mode: 'Code39',
          bar_code_field: null,
          bar_code_width: null,
          bar_code_height: null,
          bar_code_top: null,
          bar_code_left: null,
          rotate: null,
          tfootTop: null,
          tfootLeft: null,
          tfootWidth: null,
          tfootHeight: null,
          theadTop: null,
          theadLeft: null,
          theadWidth: null,
          theadHeight: null
        },
        is_gratis: 0,
        tpl_desc: null
      }
    }
  },
  mounted: function() {
    if (this.itemData) {
      // 设置初始数值
      this.formParams = extract(this.formParams, this.itemData)
      if (this.formParams.cover) {
        this.coverPath = process.env.VUE_APP_BASE_URL + this.formParams.cover
      }
    }
  },
  methods: {
    handleSubmitForm() {
      this.isSubmit = true
      save(this.formParams, this.formParams.tpl_id || null).then(function() {
        this.$emit('on-cancel-modal', true)
      }.bind(this)).catch(function() {
        this.isSubmit = false
      }.bind(this))
    },
    handleCodemirror(value, field) {
      if (field) {
        if (field === 'thead4') {
          this.formParams[field]['html'] = value
        } else {
          this.formParams[field] = value
        }
      }
    },
    // 取消弹出框
    handleCancelModal(refresh = false) {
      if (!this.isSubmit) {
        this.$emit('on-cancel-modal', refresh)
      }
    },

    // 添加字段
    handleAddFieldItem() {
      if (!this.fileItem.title) {
        this.$message.warning('标题不能为空'); return false
      } else if (!this.fileItem.field) {
        this.$message.warning('字段标识不能为空'); return false
      }
      for (let i = 0; i < this.formParams.lists.item_list.length; i++) {
        const item = this.formParams.lists.item_list[i]
        if (item.field === this.fileItem.field) {
          this.$message.warning('该字段已经存在'); return false
        }
      }
      this.formParams.lists.item_list.push(this.fileItem)
      this.fileItem = {
        title: '',
        field: '',
        width: '',
        size: ''
      }
    },
    // 删除字段
    handleDelFieldItem(index) {
      this.formParams.lists.item_list.splice(index, 1)
    },
    handleEditFieldItem(index) {
      const item = this.formParams.lists.item_list[index]
      this.fileItem = {
        title: item.title,
        field: item.field,
        width: item.width,
        size: item.size
      }
      this.itemIndex = index
    },
    handleEditConfirm() {
      const index = this.itemIndex
      this.formParams.lists.item_list.splice(index, 1, this.fileItem)
      this.fileItem = {
        title: '',
        field: '',
        width: '',
        size: ''
      }
      this.itemIndex = -1
    },
    handleUpload(object) {
      this.imageUpload = true
      // 清除已选择文件,允许重写选择上传文件
      this.$refs[object.data.field].clearFiles()
      const param = new FormData()
      param.append('files', object.file)
      upload(param).then(res => {
        this.formParams.cover = res.data[0]
        this.coverPath = process.env.VUE_APP_BASE_URL + this.formParams.cover
        this.imageUpload = false
      }).catch(() => {
        this.imageUpload = false
      })
    },
    handleSortFieldItem(index, tag) {
      if (tag === 1) {
        // 上移
        const item = this.formParams.lists.item_list[index]
        const itemPre = this.formParams.lists.item_list[index - 1]
        this.formParams.lists.item_list.splice(index - 1, 2, item, itemPre)
      } else if (tag === 2) {
        // 下移
        const item = this.formParams.lists.item_list[index]
        const itemNext = this.formParams.lists.item_list[index + 1]
        this.formParams.lists.item_list.splice(index, 2, itemNext, item)
      }
    }
  }
}
</script>

<style lang="scss">
.print-tpl {
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-radius: 0;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    padding: 0;
    .el-tabs__header {
      margin-bottom: 0;
    }
    .el-tabs__content {
      .el-tab-pane {
        padding: 20px 20px 0 20px;
      }
    }
  }
  .el-textarea .el-textarea__inner{ // 然后找到对应的类名,在这里将拉伸去掉即可
    resize: none;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .avatar {
    width: 160px;
    height: 200px;
    display: block;
  }
}
</style>

<style lang="scss" scoped>
.print-tpl {
  .not-label {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
